<template>
  <div class="page-content">
    <hy-table
      :listData="dataList"
      :listCount="dataCount"
      v-model:page="pageInfo"
      v-bind="contentTableConfig"
    >
      <!-- 头部插槽 -->
      <template #headerHandler>
        <el-button type="primary" @click="handleNewClick">新建</el-button>
      </template>
      <template #status="scope">
        <el-button plain :type="scope.row.status == '1' ? 'success' : 'danger'">
          {{ scope.row.status == "1" ? "已完成" : "未完成" }}
        </el-button>
      </template>
      <template #createAt="scope">
        <span>{{ scope.row.createAt }}</span>
      </template>
      <template #updateAt="scope">
        <span>{{ scope.row.updateAt }}</span>
      </template>
      <template #handler="scope">
        <div>
          <el-button @click="handleEditClick(scope.row)">修改</el-button>
          <el-button @click="handleDeleteClick(scope.row)">删除</el-button>
        </div>
      </template>
    </hy-table>
    <from-dialog v-model="show">
      <from-submit
        ref="fromRef"
        :submitFormConfig="submitFormConfig"
        @queryBtnClick="submitOk"
      />
    </from-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch, nextTick } from "vue";
import FromSubmit from "@/components/Form/FromSubmit.vue";
import FromDialog from "@/components/Dialog/FromDialog.vue";
import HyTable from "@/components/Table/Com/BaseTable.vue";
import { contentTableConfig, submitFormConfig } from "../config.ts";
import {
  addTask,
  updateTask,
  deleteTask,
  getTask,
} from "@/api/demand_management/task.ts";
import { ElMessage, ElMessageBox } from "element-plus";

interface Props {
  pageName: string;
  contentTableConfig: any;
}
withDefaults(defineProps<Props>(), {
  pageName: "",
  contentTableConfig: {},
});
const show = ref(false);
const edit = ref("");
const fromRef = ref<any>();
const pageInfo = ref({ currentPage: 1, pageSize: 10 });
const dataList = ref([]);
const dataCount = ref(0);
const getPageData = (queryInfo: any = {}) => {
  getTask({ ...pageInfo, ...queryInfo }).then((res) => {
    dataList.value = res.data.list;
    dataCount.value = res.data.count;
  });
};
const handleNewClick = () => {
  show.value = true;
  edit.value = "";
  fromRef.value?.resetForm();
};
const submitOk = (value: any) => {
  if (edit.value) {
    updateTask(edit.value, value).then((res) => {
      ElMessage.success(res.msg);
      show.value = false;
      getPageData();
    });
  } else {
    addTask(value).then((res) => {
      ElMessage.success(res.msg);
      show.value = false;
      getPageData();
    });
  }
};
const handleEditClick = (row: any) => {
  show.value = true;
  edit.value = row.id;
  nextTick(() => {
    fromRef.value?.setForm(row);
  });
};
const handleDeleteClick = (row: any) => {
  ElMessageBox.confirm("确认删除？", "删除", {
    confirmButtonText: "确认",
    type: "warning",
  })
    .then(() => {
      deleteTask({ id: row.id }).then((res) => {
        ElMessage.success(res.msg);
        getPageData();
      });
    })
    .catch(() => {});
};
watch(pageInfo, () => getPageData());
defineExpose({ getPageData });
</script>
